<template>
	<div class="totalStyle contractinfo_box">
		<div class="tablestyle">
			<div class="titleStyle">
				<p class="leftTitle font_w">特殊作业记录</p>
				<div>
					<el-button type="primary" :loading="exportLoading" @click="handleExport">导出数据</el-button>
					<el-button type="primary" v-if="userInfo&&(userInfo.roleId == 52 || userInfo.roleId == 10)" @click="handleAudit(1)">批量审核</el-button>
					<el-button type="primary" @click="handleBuild">新建</el-button>
				</div>
			</div>
			<div class="bottomBox">
				<div class="searchsize">
					<el-row :gutter="24" style="width: 100%;" class="searchBox flex">
						<el-col :span="7.5">
							<el-date-picker v-model="planTime" type="daterange" start-placeholder="开始日期"
								end-placeholder="结束日期" value-format="YYYY-MM-DD" :clearable="false" />
						</el-col>
						<el-col :span="3">
							<RemoteSelect
							  type="CUSTOMER_INFO"
							  placeholder="请输入客户名称"
							  v-model:value="queryParams.customerId" v-model:label="queryParams.customerName"
							/>
						</el-col>
						<!-- <el-col :span="3">
							<Select placeholder="请选择作业港区" disabled :dataConfig="{ params: { type: 'DICT',dictType:'PORT_AREA' } }"
								v-model:value="queryParams.portAreaCode" v-model:label="queryParams.portAreaName" />
						</el-col> -->
						<el-col :span="3">
							<Select placeholder="请选择拖轮" :selectData="selects.tugList" v-model:value="queryParams.tugId"
								v-model:label="queryParams.tugNo" />
						</el-col>
						<el-col :span="4">
							<el-button type="info" plain @click="reset">重置</el-button>
							<el-button type="primary" plain class="searchbutton" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>
				<div class="chartstyle">
					<el-table :data="tableData" :header-cell-style="{ background: '#F2F5FA' }" border
						style="width: 100%;" @selection-change="handleSelectionChange"
						@select-all="handleSelectionChange">
						<el-table-column type="selection" :width="60" align="center" />
						<el-table-column type="index" :index="1" label="序号" :width="60" align="center" />
						<el-table-column prop="tugNo" label="拖轮" align="center" width="120" />
						<el-table-column prop="workItemName" label="作业项目" align="center" width="100" />
						<el-table-column prop="portAreaName" label="作业港区" align="center" width="120" />
						<el-table-column prop="beginTime" label="开始时间" align="center" width="150" />
						<el-table-column prop="endTime" label="结束时间" align="center" width="150" />
						<el-table-column prop="customerName" label="客户名称" align="center" width="120" />
						<el-table-column prop="workHours" label="作业时长(h)" align="center" width="100" />
						<el-table-column prop="remark" label="备注" align="center" />
						<el-table-column label="状态" :width="80" fixed="right" align="center">
							<template #default="scope">
								<el-tag :type="scope.row.status == 0 ? 'warning' : 'success'">{{scope.row.status == 0 ? '待审' : '已审'}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作列" width="120" fixed="right" align="center">
							<template #default="scope">
								<span class="buttonFun cursor" v-if="scope.row.status > 0" @click="handleView(scope.row)">查看</span>
								<span class="buttonFun cursor" v-if="scope.row.status == 0" @click="handleEdit(scope.row)">编辑</span>
								<el-popconfirm width="520" v-if="scope.row.status == 0" confirm-button-text="确定" cancel-button-text="取消"
									@confirm="handleDelete(scope.row)" title="你确定要删除这条数据吗?">
									<template #reference>
										<span class="buttonFun cursor">删除</span>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty v-loading="tableLoading"></el-empty>
						</template>
					</el-table>
					<div class="demo-pagination-block">
						<el-pagination :current-page="queryParams.startPage" :page-size="queryParams.pageSize"
							:page-sizes="[5, 10, 15, 20]" :background="background"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>

		<!-- 详情 -->
		<Detail ref="detailRef" @callback="queryTableData(queryParams)"></Detail>
	</div>
</template>

<script setup name="recordIndex">
	import Select from '@/components/Select/index.vue';
	import RemoteSelect from '@/components/RemoteSelect/index.vue';
	import api from '@/api/plan/plan/recordIndex'
	import Detail from './component/detail.vue'
	import tugApi from '@/api/basicData/tug/index'
	import { exportFile } from "@/utils/fileUtils";
	import {
		ref,
		onMounted
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import {
		getNowDate
	} from '@/utils/index'
	const userInfo = ref()
	const selectRows = ref([])
	const detailRef = ref(null) // 明细组件ref
	const tableLoading = ref(false)
	const total = ref(0)
	const tableData = ref()
	const selects = ref({
		tugList: []
	})
	const planTime = ref([getNowDate('YYYY-MM') + '-01',getNowDate('YYYY-MM') + '-' + new Date(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1) - 1).getDate()])
	const queryParams = ref({
		isSpecialRecord: 1,
		customerId:'',
		customerName:'',
		portAreaCode:'04',
		portAreaName:'',
		tugId:'',
		tugNo:'',
		startPage: 1,
		pageSize: 10
	})

	//列表复选框选择事件
	const handleSelectionChange = (e) => {
		// 在这里处理选中项，不包括展开行
		// 通过判断selection中的item是否包含type='expand'的column来过滤
		const nonExpandRows = tableData.value.filter(item => {
			return e.includes(item); // 假设item不是展开行的数据
		});
		
		selectRows.value = nonExpandRows

	}
	//新增
	const handleBuild = () => {
		detailRef.value.show({
			mode: 'add'
		})
	}
	//重置
	const reset = () => {
		queryParams.value = {
			isSpecialRecord: 1,
			customerId:'',
			customerName:'',
			portAreaCode:'04',
			portAreaName:'',
			tugId:'',
			tugNo:'',
			startPage: 1,
			pageSize: 10
		}
		queryTableData(queryParams.value)
	}
	//查看事件
	const handleView = (row) => {
		detailRef.value.show({
			mode: 'view',
			row: row
		})
	}
	//编辑
	const handleEdit = (row) => {
		detailRef.value.show({
			mode: 'edit',
			row: row
		})
	}
	//删除
	const handleDelete = (row) => {
		api.remove({
				ids: row.id
			})
			.then(res => {
				if (res.code === 200) {
					ElMessage.success('删除成功')
					queryTableData(queryParams.value)
				} else {
					ElMessage.error(res.msg)
				}
			})
	}
	//审核事件
	const handleAudit = (status) => {
		ElMessageBox.confirm("确定审核？", "确定", {
		  type: "warning",
		  icon: 'WarningFilled'
		}).then(_=>{
			var list = [];
			if(selectRows.value&&selectRows.value.length > 0){
				selectRows.value.forEach(item=>{
					list.push({
						id: item.id,
						status: status
					})
				})
			}
			api.updateApproveBatch(list).then(res => {
				if (res.code === 200) {
					ElMessage.success('审核成功')
					queryTableData(queryParams.value)
				} else {
					ElMessage.error(res.msg)
				}
			})
		}).catch(_=>{
			console.log("取消审核");
		})
	}
	
	//切换一页显示多少条数据
	const handleSizeChange = (val) => {
		queryParams.value.pageSize = val;
		queryTableData(queryParams.value);
	};
	// 点击跳转到第几页
	const handleCurrentChange = (val) => {
		queryParams.value.startPage = val;
		queryTableData(queryParams.value);
	};
	//查询
	const search = () => {
		queryParams.value.startPage = 1
		queryParams.value.pageSize = 10
		queryTableData(queryParams.value)
	}
	//查询
	const queryTableData = (e) => {
		selectRows.value = []
		tableLoading.value = true
		if(planTime.value&&planTime.value.length > 0){
			e.startTime = planTime.value[0]
			e.endTime = planTime.value[1]
		}
		queryParams.value = e
		api.specialList(queryParams.value).then(res => {
			tableLoading.value = false
			tableData.value = res.data?.records || []
			total.value = res.data?.total || 0
		})
	}
	onMounted(() => {
		getTugList()
		queryTableData(queryParams.value)
		userInfo.value = JSON.parse(localStorage.getItem('userData'))
	})
	const getTugList = () => {
		selects.value.tugList = []
		tugApi.getList({
			startPage: 1,
			pageSize: 1000,
			portAreaCode:'04'
		}).then(res => {
			if (res.data.records.length > 0) {
				res.data.records.forEach(item => {
					selects.value.tugList.push({
						label: item.tugNo,
						value: item.id
					})
				})
			}
		})
	}
	
	// 导出数据
	const exportLoading = ref(false)
	const handleExport = () => {
		exportLoading.value = true;
		var params = JSON.parse(JSON.stringify(queryParams.value))
		params.pageSize = 1000
		api.exportData(params).then(res=>{
			exportFile(res.data,'特殊作业记录导出','xlsx')
		}).then(_=>{
			setTimeout(function(){
				exportLoading.value = false;
			},300)
		})
	}
</script>
<style lang='less' scoped>
	.tablestyle {
		position: relative;

		.inputBox {
			:deep(.el-input) {
				width: 200px;
			}
		}

		:deep(.el-table__header thead tr) {
			background-color: rgba(64, 158, 255, 0.1);
		}

		:deep(.el-col-3) {
			max-width: none;
		}
	}

	.contractinfo_box {
		:deep(.el-table--fit) {
			height: 100%;
		}

		:deep(.el-table__body-wrapper) {
			overflow-y: auto;
		}

		.tablestyle {
			position: relative;

			:deep(.el-table__header thead tr) {
				background-color: rgba(64, 158, 255, 0.1);
			}

			:deep(.el-col-3) {
				max-width: none;
			}
		}

		:deep(.customer-no-border-table .el-table--border, .el-table--group) {
			border: none;
		}

		.demo-pagination-block {
			margin-top: 16px;
			position: absolute;
			bottom: 32px;
			right: 32px;
		}

		.buttonFun {
			color: #2E83FC;
			font-size: 14px;
			margin-right: 8px;
		}

		.sircle {
			width: 6px;
			height: 6px;
			border-radius: 50%;

			display: inline-block;
			margin-bottom: 3px;
		}

		.blue {
			background-color: #2E83FC;
		}

		.green {
			background-color: #54B831;
		}

		.origin {
			background-color: #FFB929;
		}

		.origin_deep {
			background-color: #FF9458;
		}

		.red {
			background-color: #F46B5A
		}

		.bottomBox {
			padding: 16px;
			height: calc(100% - 48px);
		}
	}
</style>